<!-- <template>
  <div class="home-container">
    <header class="home-header">
      <h1>欢迎, {{ username }}!</h1>
      <el-button @click="handleLogout" class="logout-button">退出登录</el-button>
    </header>
    <main class="home-content">
      <p>这是您的主页内容</p>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const username = ref('admin')
const router = useRouter()

const handleLogout = () => {
  localStorage.removeItem('isAuthenticated')
  router.push({ name: 'Login' })
}
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid blue;
}

.home-header h1 {
  color: #7c3aed;
  margin: 0;
}

.logout-button {
  background-color: #8b5cf6;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.logout-button:hover {
  background-color: #7c3aed;
}

.home-content {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.home-content p {
  color: #6d28d9;
  font-size: 1.2rem;
}
</style> -->
<template>
  <div class="layout-container">
    <!-- 左侧菜单栏 -->
    <div class="sidebar" :class="{ 'sidebar-collapse': isCollapse }">
      <div class="logo-container">
        <img class="logo" src="@/assets/logo.svg" alt="系统Logo" />
        <span v-if="!isCollapse">管理系统</span>
      </div>

      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical"
        :collapse="isCollapse"
        background-color="#001529"
        text-color="#b7bdc3"
        active-text-color="#409eff"
        router
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/role">
            <el-icon>
              <Key />
            </el-icon>

            <span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="/user">
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>用户管理</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <!-- 右侧内容区 -->
    <div class="main-container">
      <!-- 顶部导航栏 -->
      <div class="navbar">
        <div class="left-menu">
          <el-icon @click="toggleCollapse">
            <expand v-if="isCollapse" />
            <fold v-else />
          </el-icon>
          <div class="time-display">
            {{ currentTime }}
          </div>
        </div>

        <div class="right-menu">
          <el-dropdown>
            <div class="user-info">
              <el-avatar
                :size="30"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              />
              <span class="username">{{ username }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleUserProfile"
                  >个人信息</el-dropdown-item
                >
                <el-dropdown-item divided @click="handleLogout"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="app-main">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();
const route = useRoute();

const isCollapse = ref(false);
const currentTime = ref('');
const username = ref('管理员');
let timer = null;

const activeMenu = computed(() => {
  return route.path;
});

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

const updateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const handleUserProfile = () => {
  console.log('查看个人信息');
};

const handleLogout = () => {
  console.log('退出登录');
  // 实际项目中这里应该有退出登录的逻辑
  localStorage.removeItem('isAuthenticated');
  ElMessage.success('已退出登录');
  router.push('/login');
};

const navigateTo = (path) => {
  router.push(path);
};

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000);
});

onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style lang="scss" scoped>
.layout-container {
  display: flex;
  height: 100vh;
  overflow: hidden;

  .sidebar {
    width: 220px;
    height: 100%;
    background-color: #001529;
    transition: width 0.3s;
    overflow: hidden;

    &.sidebar-collapse {
      width: 64px;
    }

    .logo-container {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      background-color: #002140;

      .logo {
        width: 32px;
        height: 32px;
        margin-right: 10px;
      }
    }

    .el-menu-vertical {
      border-right: none;
      height: calc(100% - 60px);

      &:not(.el-menu--collapse) {
        width: 220px;
      }
    }
  }

  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .navbar {
      height: 60px;
      background-color: #fff;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;

      .left-menu {
        display: flex;
        align-items: center;

        .el-icon {
          font-size: 20px;
          cursor: pointer;
          margin-right: 20px;

          &:hover {
            color: var(--el-color-primary);
          }
        }

        .time-display {
          font-size: 14px;
          color: #666;
        }
      }

      .right-menu {
        .user-info {
          display: flex;
          align-items: center;
          cursor: pointer;

          .username {
            margin-left: 10px;
            font-size: 14px;
          }
          }
        }
      }
    }

    .app-main {
      flex: 1;
      padding: 20px;
      background-color: #f0f2f5;
      overflow: auto;
    }
  }

</style>